<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-scrollbar class="my-body height-300" style="position: relative">
        <el-divider content-position="left">任务</el-divider>
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <el-collapse-item :title="v.taskName+' 创建时间：'+v.createTime" :name="v.processInstanceId"
                            v-for="(v,i) in tableData" :key="i">
            <form-model-v :fields="formModel.fields" ref="formModel" @refresh="init" :task-id="v.taskId"
                          :process-definition-id="v.processDefinitionId" :process-instance-id="v.processInstanceId"/>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </el-col>
    <el-col :span="16">
      <div class="my-body height-300">
        <el-divider content-position="left">流程图</el-divider>
        <el-table :data="tableDataB" border style="width: 270px;position: absolute;right: 20px" :show-header="false">
          <el-table-column prop="label"/>
          <el-table-column prop="value"/>
        </el-table>
        <el-scrollbar class=" height-400" v-if="flowChartData.diagramHeight">
          <div style="display: flex;align-items: center;"
               class=" height-400">
            <flow-chart :elements="flowChartData.elements" :flows="flowChartData.flows" floatingFrame
                        @getTask="getTask"
                        :diagramWidth="flowChartData.diagramWidth +10" :diagramHeight="flowChartData.diagramHeight"
                        :diagram-begin-x="flowChartData.diagramBeginX" :diagram-begin-y="flowChartData.diagramBeginY">
              <template v-slot:task-popover>
                <el-divider content-position="left">任务</el-divider>
                <el-table :data="[
                  {label:'开始时间',value:momentF(task.createTime)},
                  {label:'完成时间',value:momentF(task.endTime)},
                  {label:'最晚时间',value:momentF(task.dueDate)},
                  ]" border :show-header="false">
                  <el-table-column prop="label"/>
                  <el-table-column prop="value"/>
                </el-table>
                <el-divider content-position="left">表单内容</el-divider>
                <el-table :data="task.fromList" border :show-header="false">
                  <el-table-column prop="propertyId"/>
                  <el-table-column prop="propertyValue"/>
                </el-table>
                <el-divider content-position="left">审批人</el-divider>
                <el-table :data="task.userList" border :show-header="false">
                  <el-table-column prop="userName"/>
                </el-table>
              </template>
              <template v-slot:task-comment>
                <el-divider content-position="left">意见</el-divider>
                <el-table :data="task.taskComments" border :show-header="false">
                  <el-table-column prop="message"/>
                  <!--                <el-table-column prop="userId"/>-->
                </el-table>
              </template>
              <template v-slot:task-back>
                <el-button @click="goBack" style="width: 100%; margin-top: 10px" type="warning">退回</el-button>
              </template>
            </flow-chart>
          </div>
        </el-scrollbar>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";
import flowChart from "@/components/flowChart";
import formModelV from "@/components/formModelV";
import moment from "moment";

export default {
  name: "task",
  mixins: [table],
  components: {
    flowChart, formModelV
  },
  data() {
    return {
      activeNames: 0,
      flowChartData: {},
      formModel: '',
      tableDataB: [],
      task: {},
      rwo: {},
      processInstance: {},
      selectTask: {},
    }
  },
  methods: {
    init() {
      service.get('/small-service-flowable/task/runtime/list').then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          if (!res.data.length) {
            this.flowChartData = {};
            this.tableDataB = []
          } else {
            this.upFlowChart();
          }
        }
      })

    },
    //刷新流程图
    upFlowChart() {
      if (!this.row.processInstanceId) {
        return;
      }
      service.get('/small-service-flowable/flowChart/rest/process-instances/model-json', {
        processInstanceId: this.row.processInstanceId
      }).then(res => {
        if (res.status === 200) {
          this.flowChartData = res.data;
        }
      })
    },
    //风琴打开
    handleChange(val) {
      if (!val) {
        return;
      }
      this.tableData.forEach(v => {
        if (v.processInstanceId === val) {
          this.row = v
        }
      })
      this.upFlowChart();
      service.get('/small-service-flowable/task/getTaskFormModel', {
        taskId: this.row.taskId
      }).then(res => {
        if (res.status === 200) {
          this.formModel = res.data.formModel
        } else {
          this.formModel = ''
        }
      })
      service.get('/small-service-flowable/history/getHistoryListByProcessInstanceId', {
        processInstanceId: this.row.processInstanceId
      }).then(res => {
        if (res.status === 200) {
          // this.processInstance = res.data;
          let tableDataB = [
            {
              label: '名称',
              value: res.data.processDefinitionName
            }, {
              label: '作者',
              value: res.data.startUserId
            }, {
              label: '发起时间',
              value: res.data.startTime
            }
          ]
          res.data.fromList.forEach(v => {
            tableDataB.push({
              label: v.propertyId,
              value: v.propertyValue
            })
          })
          this.tableDataB = tableDataB;
        }
      })
    },
    //历史节点
    getTask(val) {
      this.selectTask = val
      service.get('/small-service-flowable/history/task', {
        taskDefinitionKey: val.id,
        processInstanceId: this.row.processInstanceId,
      }).then(res => {
        if (res.status === 200) {
          this.task = res.data;
        }
      });
    },
    //退回
    goBack() {
      service.put('/small-service-flowable/task/goBack', {
        newActivityId: this.selectTask.id,
        processInstanceId: this.row.processInstanceId,
        currentActivityId: this.row.taskDefinitionKey,
      }).then(this.callback)
    }
  }

}
</script>

<style scoped>

.form-item {
  display: flex;
  justify-content: space-between;
}
</style>